<template>
  <div class="containers">
    <div class="betterScroll" @touchmove="touchmove" @touchstart="touchstart">
      <div class="container">
        <div class="container--dropDown__box">
          <img :src="dropDownImg" alt="#" ref="dropDownImg">
          <span ref="dropDown">{{dropDown || '下拉刷新'}}</span>
        </div>
        <div class="swiper-container">
          <div class="swiper-wrapper">
          <span class="swiper-slide" v-for="(item, index) in banner" :key="index">
            <img :src="item.bannerUrl" alt="#">
          </span>
          </div>
          <div class="swiper-pagination"></div>
        </div>
        <div class="container--item__box">
          <div class="container--item__option">
        <span class="container--img__beautyMakeup"></span>
            <span class="container--text__beautyMakeup">美妆护肤</span>
          </div>
          <div class="container--item__option">
          <span class="container--img__beautyMakeup Watch"></span>
            <span class="container--text__beautyMakeup">名品腕表</span>
          </div>
          <div class="container--item__option">
          <span class="container--img__beautyMakeup furniture"></span>
            <span class="container--text__beautyMakeup">超值家纺</span>
          </div>
          <div class="container--item__option">
          <span class="container--img__beautyMakeup Diamonds"></span>
            <span class="container--text__beautyMakeup">潮流饰品</span>
          </div>
          <div class="container--item__option">
          <span class="container--img__beautyMakeup Luggage"></span>
            <span class="container--text__beautyMakeup">时尚箱包</span>
          </div>
          <div class="container--card__promotion" v-for="(item,key) in cardImg" :key="key">
            <img v-lazy="item.cardImg" alt="#">
          </div>
        </div>
        <div class="container--item__limit">
          <span class="container--limit__seckill">限时秒杀</span>
          <div class="container--limit__box">
            <span class="container--time__text">距离结束还有</span>
            <span class="container--num__hour">
              {{hour.toString().split('').length === 1? '0' + hour: hour}}
            </span>：
            <span class="container--num__hour">
              {{minute.toString().split('').length === 1? '0' + minute: minute}}
            </span>：
            <span class="container--num__hour">
              {{time.toString().split('').length === 1? '0' + time: time}}
            </span>
          </div>
          <div class="betterScrollDiscount">
            <div class="container--discount__box" @click="discount">
              <div class="container--discount__card" v-for="(item,key) in PromptGoodsImg" :key=key>
                <div class="container--commodityImg">
                  <img v-lazy="item.prodImage[0]"
                       class="container--img__discount"
                       alt="#">
                </div>
                <span class="container--item__price">券后价</span>
                <span class="container--item__text">￥{{item.killPrice}}</span>
                <span class="container--item__decotration">
                  ￥{{item.killPrice > 100 ? +item.killPrice + 50: +item.killPrice + 5 }}
                </span>
              </div>
              <div class="container--discount__card">
                <div class="container--commodityText">
                  MORE >>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="container--activity__choiceness">
          <span class="container--activity__text">精选活动</span>

          <div class="container--activity__box"
               v-for="(item,key) in SpecialEventscommodityImg"
               :key="key">
            <div class="container--img__top">
              <img v-lazy="item.merchandiseTop" alt="#">
            </div>
            <div class="container--choiceness__commodity"
                 @click="commodity(index)"
                 v-for="(imgItem,index) in item.img" :key="index">
              <div class="container--merchandise">
                <img v-lazy="imgItem.prodImage[0]" alt="items.link">
              </div>
              <span class="container--commodity__text">券后价</span>
              <span class="container--commodity__price">￥{{imgItem.currentPrice}}</span>
              <span class="container--text__price">￥{{imgItem.originPrice}}</span>
            </div>
          </div>

        </div>
        <div class="container--item__Recommend">
          <p class="container--recommend__title">为您推荐</p>
          <div class="container--recommend__commodity"
               v-for="(item, keys) in recommend" :key="keys">
            <div class="container--img__box">
              <img :src="item.prodImage[0]" alt="#" class="container--recommend__img">
            </div>
            <span class="container--recommend__text">
              {{item.prodSubTitle}}
            </span>
            <span class="container--recommend__money">券后价</span>
            <span class="container--recommend__price">￥{{item.currentPrice}}</span>
            <span class="container--text__price">￥{{item.originPrice}}</span>
          </div>
        </div>
        <div class="container--pullUpLoad__box" v-if="pullUpLoad">
          <img src="../../assets/mall/loading.gif" alt="#">
          <span>正在加载更多...</span>
        </div>
      </div>>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

// import '../../mockjs';
/* eslint-disable*/

export default {
  name: 'recommend',
  data() {
    return {
      banner: null,
      pullUpLoad: false,
      dropDown: '',
      dropDownImg: require('../../assets/mall/dropDown.png'),
      startNum: null,
      swiper: null,
      option: [],
      time: 59,
      minute: 30,
      hour: 19,
      num: 0,
      intervalTime: null,
      betterScroll: null,
      betterScrollDiscount: null,
      Math: Math.floor(Math.random() * 277),
      imgData: null,
      carouselImg: null, // 轮播
      cardImg: [
        { cardImg: require('../../assets/mall/cardone.png') },
        { cardImg: require('../../assets/mall/cardtow.png') },
      ], // 抢购卡片
      PromptGoodsImg: null, // 限时秒杀
      SpecialEventscommodityImg: [], // 精选活动商品
      cosmeticsImgData: null,
      recommend: [],
    };
  },
  methods: {
    commodity(index) {
      this.$router.push({ name: 'detailPage', params: {
        data: JSON.stringify(this.cosmeticsData[index])
        }})
    },
    discount() {
      this.$router.push({ name: 'ExplodingSpike' })
    },
    touchstart(e) {
      this.startNum = e.changedTouches[0].clientY;
    },
    touchmove(e) {
      if ((e.changedTouches[0].clientY - this.startNum) / 3 > 50) {
        this.$refs.dropDown.innerHTML = '松开立即刷新';
        this.$refs.dropDownImg.style.transform = 'rotate(180deg)';
        this.$refs.dropDownImg.style.transition = '.5s';
      }
    },
    swipers() {
      this.swiper = new this.$Swiper ('.swiper-container', {
        direction: 'horizontal',
        loop: true, // 循环模式选项
        autoplay: {
          delay: 1500,
          disableOnInteraction: false,
        },
        // 分页器
        pagination: {
          el: '.swiper-pagination',
        },
      });
    },
  },
  mounted() {
    this.intervalTime = setInterval(() => {
      this.time -= 1;
      if (this.time <= 0) {
        this.minute -= 1;
        this.hour === 0 && this.minute === 0?clearInterval(this.intervalTime): this.time = 59;
      }
      if (this.minute <= 0) {
        if (this.hour <= 0) {
          this.num += 1;
        } else {
          if (this.num === 1) {
            this.minute = 0;
          } else {
            this.minute = 59;
            this.hour -= 1;
          }
        }
      }
    }, 1000);
    this.$nextTick(() => {
      if (!this.betterScroll) {
        this.betterScroll = new this.$Bs('.betterScroll', {
          scrollX: false,
          scrollY: true,
          click: true,
          probeType: 1, // 分发事件的情况
          pullDownRefresh: {
            threshold: 40,
            stop: 50,
          },
          pullUpLoad: {
            threshold: -40,
            stop: -50,
          },
        });
        this.betterScroll.on('pullingDown', () => {
          this.$refs.dropDown.innerHTML = '正在刷新';
          this.dropDownImg = require('../../assets/mall/loading.gif');
          setTimeout(() => {
            this.$refs.dropDown.innerHTML = '刷新成功';
          }, 1000);
          setTimeout(() => {
            this.$refs.dropDown.innerHTML = '下拉刷新';
            this.$refs.dropDownImg.style.transform = 'none';
            this.$refs.dropDownImg.style.transition = 'none';
            this.dropDownImg = require('../../assets/mall/dropDown.png');
            this.betterScroll.finishPullDown();
          }, 1500);
        });
        this.betterScroll.on('pullingUp', () => {
          this.pullUpLoad = !this.pullUpLoad;
          setTimeout(() => {
            this.pullUpLoad = !this.pullUpLoad;
            this.betterScroll. finishPullUp();
          }, 1000);
        });
      } else {
        this.betterScroll.refresh();
      }
      if (!this.betterScrollDiscount) {
        this.betterScrollDiscount = new this.$Bs('.betterScrollDiscount', {
          scrollX: true,
          scrollY: false,
          click: true,
          stopPropagation: true, // 阻止滑动时冒泡使嵌套层滑动
        });
      } else {
        this.betterScrollDiscount.refresh();
      }
    });
  },
  created() {
    axios.all([
      this.$api.banner(),
      this.$api.secKill({ count: 4}),
      this.$api.mallData( {
        prodCategory: 'beauty',
        prodSubClass: 'cosmetics',
        startIndex: 0,
        count: 3,
      } ),
      this.$api.mallData( {
        prodCategory: 'beauty',
        prodSubClass: 'cosmetics',
      } )
    ]).then((data) => {
      let [banner,secKill,mallData,mallDatas] = [...data];
      this.banner = banner.data.data;
      this.$nextTick(() => this.swipers());
      this.PromptGoodsImg = secKill.data.data;
      this.cosmeticsData = mallData.data.data;
      if(mallDatas.data.code === 10100) this.recommend = mallDatas.data.data;
      this.SpecialEventscommodityImg = [
        {
          img: this.cosmeticsData,
          merchandiseTop: require('../../assets/mall/beautyMakeupBanner.png')
        },
        {
          img: this.cosmeticsData,
          merchandiseTop: require('../../assets/mall/mallWatch.png')
        },
        {
          img: this.cosmeticsData,
          merchandiseTop: require('../../assets/mall/beautyMakeupBanner.png')
        },
        {
          img: this.cosmeticsData,
          merchandiseTop: require('../../assets/mall/beautyMakeupBanner.png')
        },
        {
          img: this.cosmeticsData,
          merchandiseTop: require('../../assets/mall/beautyMakeupBanner.png')
        },
        {
          img: this.cosmeticsData,
          merchandiseTop: require('../../assets/mall/beautyMakeupBanner.png')
        }
      ];
      console.log(data);
    }).catch((error) => {
      console.log(error);
    });
      // electricalAppliances: {
      //   img: [
      //     this.mallData[Maths()],
      //     this.mallData[Maths()],
      //     this.mallData[Maths()],
      //   ],
      //   merchandiseTop: require('../../assets/mall/electricalAppliances.png')
      // },
      // Digital: {
      //   img: [
      //     this.mallData[Maths()],
      //     this.mallData[Maths()],
      //     this.mallData[Maths()],
      //   ],
      //   merchandiseTop: require('../../assets/mall/Digital.png')
      // },
      // package: {
      //   img: [
      //     this.mallData[Maths()],
      //     this.mallData[Maths()],
      //     this.mallData[Maths()],
      //   ],
      //   merchandiseTop: require('../../assets/mall/package.png')
      // },
      // Sportswear: {
      //   img: [
      //     this.mallData[Maths()],
      //     this.mallData[Maths()],
      //     this.mallData[Maths()],
      //   ],
      //   merchandiseTop: require('../../assets/mall/AthleticWear.png')
      // },
      // parts: {
      //   img: [
      //     this.mallData[Maths()],
      //     this.mallData[Maths()],
      //     this.mallData[Maths()],
      //   ],
      //   merchandiseTop: require('../../assets/mall/parts.png')
      // },
      // mallWatch: {
      //   img: [
      //     this.mallData[Maths()],
      //     this.mallData[Maths()],
      //     this.mallData[Maths()],
      //   ],
      //   merchandiseTop: require('../../assets/mall/mallWatch.png')
      // },
  },
  updated() {
    if (this.pullUpLoad) this.betterScroll.refresh();
  },
};
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
  font-size: 0;
}
.containers{
  display: inline-block;
  .betterScroll{
    width: 100vw;
    height: 79.3vh;
    overflow: hidden;
    background-color: #f3f3f3;
    .container{
      width: 100vw;
      .container--dropDown__box{
        position: absolute;
        top: -1rem;
        left: 50%;
        transform: translate(-50%);
        img{
          width: .5rem;
          height: .5rem;
          vertical-align: middle;
        }
        span{
          font-size: .35rem;
          vertical-align: middle;
        }
      }
      .swiper-container{
        background-color: #fff;
        height: 4rem;
        .swiper-slide{
          img{
            height: 4rem;
            width: 100vw;
          }
        }
      }
      .container--item__box{
        width: 100vw;
        height: (425/75) + rem;
        background-color: #fff;
        margin-bottom: (18/75) + rem;
        .container--item__option{
          display: inline-block;
          position: relative;
          width: 20%;
          height: (197/75) + rem;
          .container--img__beautyMakeup{
            position: absolute;
            display: block;
            left: 0;
            right: 0;
            margin: .3rem auto;
            border-radius: 50%;
            width: (102/72) + rem;
            height: (102/72) + rem;
            background: url("../../assets/mall/beautyMakeup.png") center no-repeat;
            background-size: 100%;
            img{
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              top: 0;
              margin: auto;
              width: (70/72) + rem;
              height: (70/72) + rem;
            }
            .Watch--img{
              transform: rotate(-25deg);
            }
          }
          .Watch{
            background: url("../../assets/mall/Watch.png") center no-repeat;
            background-size: 100%;
          }
          .furniture{
            background: url("../../assets/mall/furniture.png") center no-repeat;
            background-size: 100%;
          }
          .Diamonds{
            background: url("../../assets/mall/Diamonds.png") center no-repeat;
            background-size: 100%;
          }
          .Luggage{
            background: url("../../assets/mall/Luggage.png") center no-repeat;
            background-size: 100%;
          }
          .container--text__beautyMakeup{
            font-size: .3rem;
            width: 100%;
            display: inline-block;
            text-align: center;
            position: absolute;
            bottom: .3rem;
          }
        }
        .container--card__promotion{
          display: inline-block;
          width: 44.2%;
          height: (187/75) + rem;
          margin-left: 4.06666667%;
          border-radius: (10/75) + rem;
          overflow: hidden;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
      .container--item__limit{
        width: 100vw;
        margin-bottom: .24rem;
        background-color: #fff;
        .container--limit__seckill{
          height: 100%;
          width: 26.6666667%;
          text-align: center;
          display: inline-block;
          line-height: (117/75) + rem;
          font-size: (33/75) + rem;
        }
        .container--limit__box{
          position: absolute;
          right: 0;
          height: (117/75) + rem;
          width: 48.94%;
          display: inline-block;
          font-size: .4rem;
          .container--time__text{
            font-size: (23/75) + rem;
            display: inline-block;
            line-height: (117/75) + rem;
            margin-right: .2rem;
          }
          .container--num__hour{
            font-size: .3rem;
            background-color: #1f8ffd;
            display: inline-block;
            width: .5rem;
            line-height: .5rem;
            text-align: center;
            border-radius: 3px;
            color: #fff;
          }
        }
        .container--discount__box{
          width: 150vw;
          .container--discount__card{
            position: relative;
            display: inline-block;
            height: (298/75) + rem;
            border-radius: 4px;
            width: 26.6vw;
            margin-left: (23/75) + rem;
            margin-bottom: (23/75) + rem;
            margin-top: (23/75) + rem;
            box-shadow: 1px -2px 5px #ccc;
            vertical-align: top;
            .container--commodityImg{
              display: inline-block;
              height: (200/75) + rem;
              width: 100%;
              .container--img__discount{
                width: 100%;
                height: (200/75) + rem;
              }
            }
              .container--commodityText{
                text-align: center;
                font-size: .35rem;
                color: #1f8ffd;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                line-height: (298/75) + rem;
                background: #eee;
            }
            .container--item__price{
              text-align: center;
              font-size: (24/75) + rem;
              color: #fff;
              display: block;
              line-height: .5rem;
              width: 1.3rem;
              border-radius: 30px;
              background-color: #208eff;
              position: absolute;
              bottom: .7rem;
              left: 5%;
            }
            .container--item__text{
              font-size: (24/75) + rem;
              position: absolute;
              bottom: .2rem;
              left: 5%;
            }
            .container--item__decotration{
              font-size: (24/75) + rem;
              text-decoration:line-through;
              color: #ccc;
              position: absolute;
              bottom: .2rem;
              left: 56%;
            }
          }
        }
      }
      .container--activity__choiceness{
        width: 100vw;
        background-color: #fff;
        margin-bottom: .24rem;
        .container--activity__text{
          height: 100%;
          width: 26.6666667%;
          text-align: center;
          display: inline-block;
          line-height: (117/75) + rem;
          font-size: (33/75) + rem;
        }
        .container--activity__box{
          position: relative;
          width: 100vw;
          .container--img__top{
            width: (692/75*10) + vw;
            height: (145/75) + rem;
            margin: auto;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .container--choiceness__commodity{
            display: inline-block;
            position: relative;
            width: (100/3) + vw;
            height: (275/75) + rem;
            .container--merchandise{
              width: 25.2vw;
              height: 2.3rem;
              margin: .05rem auto;
              img{
                width: inherit;
                height: inherit;
              }
            }
            .container--commodity__text{
              text-align: center;
              font-size: (24/75) + rem;
              color: #fff;
              display: block;
              line-height: .5rem;
              width: 1.5rem;
              border-radius: 30px;
              background-color: #208eff;
              position: absolute;
              bottom: .7rem;
              left: 20%;
            }
            .container--commodity__price{
              font-size: (24/75) + rem;
              position: absolute;
              bottom: .2rem;
              left: 15%;
            }
            .container--text__price{
              font-size: (24/75) + rem;
              text-decoration:line-through;
              color: #ccc;
              position: absolute;
              bottom: .2rem;
              left: 56%;
            }
          }
        }
      }
      .container--item__Recommend{
        width: 100vw;
        background-color: #fff;
        .container--recommend__title{
          font-size: .44rem;
          height: 100%;
          line-height: 1.56rem;
          margin-left: .3733333rem;
        }
        .container--recommend__commodity{
          position: relative;
          width: 100vw;
          height: (230/75) + rem;
          margin-left: .35rem;
          .container--img__box{
            display: inline-block;
            width: (200/75) + rem;
            height: 100%;
            .container--recommend__img{
              width: (200/75) + rem;
              height: 100%;
            }
          }
          .container--recommend__text{
            font-size: .35rem;
            vertical-align: top;
            width: 66%;
            display: inline-block;
            margin-left: .2rem;
          }
          .container--recommend__money{
            text-align: center;
            font-size: (24/75) + rem;
            color: #fff;
            line-height: .5rem;
            width: 1.5rem;
            border-radius: 30px;
            background-color: #208eff;
            position: absolute;
            bottom: 1rem;
            left: 29%;
          }
          .container--recommend__price{
            font-size: (24/75) + rem;
            position: absolute;
            bottom: 1.05rem;
            left: 46%;
            color: #208eff;
          }
          .container--text__price{
            font-size: (24/75) + rem;
            color: #ccc;
            position: absolute;
            bottom: .4rem;
            left: 29%;
          }
        }
      }
      .container--pullUpLoad__box{
        text-align: center;
        img{
          width: .5rem;
          height: .5rem;
          vertical-align: middle;
        }
        span{
          font-size: .35rem;
          vertical-align: middle;
        }
      }
      .bottom{
        margin-bottom: .24rem;
      }
    }
  }
}

</style>
